<template>
  <div class="menuBox">
    <div class="lefts" @click="btnFn('prev')"></div>
    <div class="menu">
      <div v-for="item in menuList" @click="checkBtn(item)" :class="'menus_'+item.checked.toString()">{{ item.text }}</div>
    </div>
    <div class="rights" @click="btnFn('next')"></div>
  </div>
  <div class="chart">
    <models></models>
  </div>
</template>
<script setup>
import { ElStep } from "element-plus";
import { ref, watch, defineProps, nextTick, onUnmounted, reactive } from "vue";
import models from "./models.vue"
const btnArrAll = reactive([
  {
    id: 1,
    text: "菜单1",
    checked: true,
  },
  {
    id: 2,
    text: "菜单2",
    checked: false,
  },
  {
    id: 3,
    text: "菜单3",
    checked: false,
  },
  {
    id: 4,
    text: "菜单4",
    checked: false,
  },
  {
    id: 5,
    text: "菜单5",
    checked: false,
  },
  {
    id: 6,
    text: "菜单6",
    checked: false,
  },
  {
    id: 7,
    text: "菜单7",
    checked: false,
  },
  {
    id: 8,
    text: "菜单8",
    checked: false,
  },
  {
    id: 9,
    text: "菜单9",
    checked: false,
  },
  {
    id: 10,
    text: "菜单10",
    checked: false,
  },
]);
const start = ref(0);
const menuList = ref([]);
watch(start, () => {
  menuList.value = [];
  for (let i = 0; i < 5; i++) {
    menuList.value.push(btnArrAll[start.value + i]);
  }
},{
  immediate:true
});
function btnFn(str) {
  if (str === "prev") {
    if (start.value === 0) {
      return;
    } else {
      start.value--;
    }
  } else {
    if (start.value + 5 >= btnArrAll.length) {
      return;
    } else {
      start.value++;
    }
  }
}

function checkBtn(item){

  for(let i=0;i<menuList.value.length;i++){
    if(menuList.value[i].id===item.id){
      menuList.value[i].checked = true
    }else{
      menuList.value[i].checked = false
    }
  }
}
</script>
<style scoped>
.chart {
  width: 100%;
  flex: 1;
}
.menuBox {
  position: absolute;
  height: 50px;
  display: flex;
  width: 40%;
  left: 50%;
  translate: -50%;
  z-index: 1000;
}
.lefts {
  background-image: url("/layout/left.png");
}
.rights {
  background-image: url("/layout/right.png");
}
.lefts,
.rights {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 30px;
}
.menu {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.menu > div {
  flex: 1;
  text-align: center;
  color: rgb(95, 158, 212);
  cursor: pointer;
  background-image: url("/layout/menu.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}
.menu > div:hover {
  color: bisque;
  background-image: url("/layout/menucheck.png");
}
.menus_true{
  color: bisque;
  background-image: url("/layout/menucheck.png") !important;
}
</style>
